import React, { useState, useEffect } from 'react'
import './List.css'
import { Layout, Button, Modal, Input, Switch, Pagination } from 'antd';
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3000/'

export default function List() {
  const [list, setList] = useState([])
  const { Header, Footer } = Layout;
  const headerStyle = {
    textAlign: 'center',
    color: '#fff',
    height: 64,
    paddingInline: 48,
    lineHeight: '64px',
    backgroundColor: '#ccc',
  };
  const footerStyle = {
    textAlign: 'center',
    color: '#fff',
    position: 'absolute',
    bottom: 0,
    width: '1150px',
    backgroundColor: '#ccc',
  };


  //添加
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [code, setCode] = useState('');
  const [name, setName] = useState('');
  const [helpCode, setHelpCode] = useState('');
  const [department, setDepartment] = useState('');
  const [phone, setPhone] = useState('');
  const [address, setAddress] = useState('');
  const [content, setContent] = useState('');
  const [person, setPerson] = useState('');
  const [checked, setChecked] = useState(false);

  //修改
  const [isModalOpen1, setIsModalOpen1] = useState(false);
  const [code1, setCode1] = useState('');
  const [name1, setName1] = useState('');
  const [helpCode1, setHelpCode1] = useState('');
  const [department1, setDepartment1] = useState('');
  const [phone1, setPhone1] = useState('');
  const [address1, setAddress1] = useState('');
  const [content1, setContent1] = useState('');
  const [person1, setPerson1] = useState('');
  const [checked1, setChecked1] = useState(false);
  const [items, setItems] = useState({});
  const [ids, setId] = useState('');
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [totaldata, setTotal] = useState(0);
  const showModal = () => {
    setIsModalOpen(true);
  };
  //修改回填
  const showModal1 = () => {
    setId(items._id)
    setCode1(items.code)
    setName1(items.name)
    setHelpCode1(items.helpCode)
    setDepartment1(items.department)
    setPhone1(items.phone)
    setAddress1(items.address)
    setContent1(items.content)
    setPerson1(items.person)
    setChecked1(items.isDefault)
    setIsModalOpen1(true);
  };

  //添加
  const handleOk = async () => {
    let obj = {
      code,
      name,
      helpCode,
      department,
      phone,
      address,
      content,
      person,
      isDefault: checked
    }
    await axios.post('/ware', obj)
    getList()
    setIsModalOpen(false);
  };

  //修改
  const handleOk1 = async () => {
    let obj = {
      _id: ids,
      code: code1,
      name: name1,
      helpCode: helpCode1,
      department: department1,
      phone: phone1,
      address: address1,
      content: content1,
      person: person1,
      isDefault: checked1
    }
    await axios.put('/ware', obj)
    getList()
    setIsModalOpen1(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
    setIsModalOpen1(false);
  };

  //开关
  const onChange = (checked) => {
    setChecked(checked);
  };

  //修改
  const onChange1 = (checked) => {
    setChecked1(checked);
  };


  useEffect(() => {
    getList()
  }, [page,pageSize])
  let getList = async () => {
    let { data: { code, data,total } } = await axios.get('/ware', { params: { page, pageSize } })
    if (code === 200) {
      setList(data)
      setTotal(total)
    }
  }

  let getItems = (item) => {
    setId(item._id)
    setItems(item)
  }

  //删除
  let del = async () => {
    if (window.confirm('确定删除吗')) {
      await axios.delete('/ware?id=' + ids,)
      console.log(ids);

      getList()
    }
    else {
      console.log("不删");
      return
    }
  }

  //分页
  let pageChange = (a, b) => {
    setPage(a)
    setPageSize(b)
  }

  return (
    <div>
      <Header style={headerStyle}>
        <div className="action">
          <Button type="primary" onClick={showModal}>+新增</Button>
          <Button type="primary" onClick={showModal1}>修改</Button>
          <Button type="primary" onClick={del}>-删除</Button>
          <Button type="primary" onClick={showModal1}>查看</Button>
        </div>
      </Header>
      <div className="list">
        <div className="list-item">
          <table style={{ width: "1100px", border: "1px solid black", borderCollapse: "collapse" }}>
            <tbody>
              <tr style={{ border: "1px solid black", height: "40px" }}>
                <th>序号</th>
                <th>状态</th>
                <th>仓库名称</th>
                <th>仓库编码</th>
                <th>所属部门</th>
                <th>地区</th>
                <th>是否默认</th>
                <th>是否锁定</th>
              </tr>
              {
                list.map((item, index) => {
                  return (
                    <tr onClick={() => getItems(item)}
                      style={{ border: "1px solid black", height: "40px", backgroundColor: items === item ? "pink" : "" }} key={item._id}>
                      <td>{index + 1}</td>
                      <td>{item.status === true ? '正常' : '停用'}</td>
                      <td>{item.name}</td>
                      <td>{item.code}</td>
                      <td>{item.department}</td>
                      <td>{item.address}</td>
                      <td>{item.isDefault === true ? '是' : '否'}</td>
                      <td>{item.isLock === false ? '未锁定' : '锁定'}</td>
                    </tr>
                  )
                })
              }
            </tbody>
          </table>
        </div>

        <div className="add">
          <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <div style={{ display: "flex", justifyContent: "space-between" }}>
              <div>
                <span>仓库编码</span>
                &nbsp;
                <Input value={code} onChange={e => setCode(e.target.value)} style={{ width: "250px" }} placeholder="自动编码" />
              </div>
              <div>
                <span>仓库名称</span>
                &nbsp;
                <Input value={name} onChange={e => setName(e.target.value)} style={{ width: "250px" }} placeholder="请录入仓库名称" />
              </div>
            </div>

            <div style={{ display: "flex", justifyContent: "space-between", marginTop: "20px" }}>
              <div>
                <span>助记码</span>
                &nbsp;
                &nbsp;
                &nbsp;
                <Input value={helpCode} onChange={e => setHelpCode(e.target.value)} style={{ width: "250px" }} placeholder="手工录入或自动生成" />
              </div>
              <div>
                <span>所属部门</span>
                &nbsp;
                <Input value={department} onChange={e => setDepartment(e.target.value)} style={{ width: "250px" }} />
              </div>
            </div>

            <div style={{ display: "flex", justifyContent: "space-between", marginTop: "20px" }}>
              <div>
                <span>负责人</span>
                &nbsp;
                &nbsp;
                &nbsp;
                <Input value={person} onChange={e => setPerson(e.target.value)} style={{ width: "250px" }} placeholder="请录入负责人" />
              </div>
              <div>
                <span>联系电话</span>
                &nbsp;
                <Input value={phone} onChange={e => setPhone(e.target.value)} style={{ width: "250px" }} placeholder='请录入联系电话' />
              </div>
            </div>
            <div style={{ marginTop: "20px" }}>
              <span>地址</span>&nbsp;
              &nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <Input value={address} onChange={e => setAddress(e.target.value)} style={{ width: "250px" }} placeholder='请录入地址' />
            </div>
            <div style={{ marginTop: "20px" }}>
              <span>备注</span>&nbsp;
              &nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <Input value={content} onChange={e => setContent(e.target.value)} style={{ width: "500px" }} />
            </div>
            <div style={{ marginTop: "20px" }}>
              <span>是否默认</span>
              <Switch defaultChecked onChange={onChange} />
            </div>
          </Modal>
        </div>


        <div className="edit">
          <Modal title="Basic Modal" open={isModalOpen1} onOk={handleOk1} onCancel={handleCancel}>
            <div style={{ display: "flex", justifyContent: "space-between" }}>
              <div>
                <span>仓库编码</span>
                &nbsp;
                <Input value={code1} onChange={e => setCode1(e.target.value)} style={{ width: "250px" }} placeholder="自动编码" />
              </div>
              <div>
                <span>仓库名称</span>
                &nbsp;
                <Input value={name1} onChange={e => setName1(e.target.value)} style={{ width: "250px" }} placeholder="请录入仓库名称" />
              </div>
            </div>

            <div style={{ display: "flex", justifyContent: "space-between", marginTop: "20px" }}>
              <div>
                <span>助记码</span>
                &nbsp;
                &nbsp;
                &nbsp;
                <Input value={helpCode1} onChange={e => setHelpCode1(e.target.value)} style={{ width: "250px" }} placeholder="手工录入或自动生成" />
              </div>
              <div>
                <span>所属部门</span>
                &nbsp;
                <Input value={department1} onChange={e => setDepartment1(e.target.value)} style={{ width: "250px" }} />
              </div>
            </div>

            <div style={{ display: "flex", justifyContent: "space-between", marginTop: "20px" }}>
              <div>
                <span>负责人</span>
                &nbsp;
                &nbsp;
                &nbsp;
                <Input value={person1} onChange={e => setPerson1(e.target.value)} style={{ width: "250px" }} placeholder="请录入负责人" />
              </div>
              <div>
                <span>联系电话</span>
                &nbsp;
                <Input value={phone1} onChange={e => setPhone1(e.target.value)} style={{ width: "250px" }} placeholder='请录入联系电话' />
              </div>
            </div>
            <div style={{ marginTop: "20px" }}>
              <span>地址</span>&nbsp;
              &nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <Input value={address1} onChange={e => setAddress1(e.target.value)} style={{ width: "250px" }} placeholder='请录入地址' />
            </div>
            <div style={{ marginTop: "20px" }}>
              <span>备注</span>&nbsp;
              &nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <Input value={content1} onChange={e => setContent1(e.target.value)} style={{ width: "500px" }} />
            </div>
            <div style={{ marginTop: "20px" }}>
              <span>是否默认</span>
              <Switch defaultChecked checked={checked1} onChange={onChange1} />
            </div>
          </Modal>
        </div>
      </div>
      <Footer style={footerStyle}>
        <div className="page">
          {/* <Pagination defaultCurrent={1} current={page} pageSize={pageSize} onChange={pageChange} total={totaldata} /> */}
          <Pagination defaultCurrent={6} total={totaldata} current={page} pageSize={pageSize} onChange={pageChange}/>
        </div>
      </Footer>
    </div>
  )
}
